<template is="web-footer">
  <div class="footer">

      <router-link :to="{path:'/bookshelf'}" :class="active == 'home' ? 'home active' : 'home'">
        <i class="iconSprite icon-home"></i>
        <span>书架</span>
      </router-link>

      <router-link :to="{path:'/'}" :class="active == 'enjoy' ? 'enjoy active' : 'enjoy'">
        <i class="iconSprite icon-enjoy"></i>
        <span>书城</span>
      </router-link>

      <router-link :to="{path:'/ranking'}" :class="active == 'position' ? 'position active' : 'position'">
        <i class="iconSprite icon-position"></i>
        <span>榜单</span>
      </router-link>

      <router-link :to="{path:'/featured'}" :class="active == 'my' ? 'my active' : 'my'">
        <i class="iconSprite icon-my1"></i>
        <span>精选</span>
      </router-link>
      
  </div>
</template>

<script>
  export default {
    name: 'webFooter',
    data() {
      return {

      }
    },
    props:["active"],
    methods: {
      back(){
        this.$router.go(-1);
      }
    }
  }
</script>

<style lang="scss" scoped>
    .footer{
        position: fixed;
        bottom:0;
        left:50%;
        width:10rem;
        margin-left:-5rem;
        height:98px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        box-shadow:0 -5px 20px #eeeef2;
        background-color:#fff;
        z-index:10;
        a{
          display: block;
          width:100%;
          text-align: center;
          color:#666;
          font-size:26px;
          i{
            display: block;
            margin:0 auto;
          }
        }
        .active{
          span{
              color:#3371ff;
          }
          .icon-home{
              background:url(../assets/images/icon/ficon1in.png) no-repeat 0 0/100% auto;
          }
          .icon-enjoy{
              background:url(../assets/images/icon/ficon2in.png) no-repeat 0 0/100% auto;
          }
          .icon-position{
              background:url(../assets/images/icon/ficon3in.png) no-repeat 0 0/100% auto;
          }
          .icon-my1{
              background:url(../assets/images/icon/ficon4in.png) no-repeat 0 0/100% auto;
          }
        }
        .icon-home{
          width:50px;
          height:50px;
          background:url(../assets/images/icon/ficon1.png) no-repeat 0 0/100% auto;
        }
        .icon-enjoy{
          width:50px;
          height:50px;
          background:url(../assets/images/icon/ficon2.png) no-repeat 0 0/100% auto;
        }
        .icon-position{
          width:50px;
          height:50px;
          background:url(../assets/images/icon/ficon3.png) no-repeat 0 0/100% auto;
        }
        .icon-my1{
          width:50px;
          height:50px;
          background:url(../assets/images/icon/ficon4.png) no-repeat 0 0/100% auto;
        }
    }
    
</style>
